<template>
  <span>
    <el-cascader :options="options" :value="fvalue" @change="change"></el-cascader>
  </span>
</template>
<script>
export default {
  props: {
    clearable: {
      type: Boolean,
      default: false
    },
    value: String,
    type: Number
  },
  data() {
    return {
      options: []
    }
  },
  computed: {
    fvalue() {
      return this.value ? this.value.split(',') : []
    }
  },
  created() {
    this.getAreaData()
  },
  methods: {
    change(n) {
      this.$emit('input', n.join(','))
    },
    async getAreaData() {
      const data = await import('@/utils/areaData')
      this.options = this.area(data, this.type)
    },
    area(data, n) {
      if (n > 3) {
        return []
      } else {
        const func = (c, lvl) => {
          const $this = []
          Object.keys(data[c]).forEach((item) => {
            const _this = {
              label: data[c][item],
              value: data[c][item]
            }
            if (n > lvl && data[item]) {
              _this.children = func(item, lvl + 1)
            }
            $this.push(_this)
          })
          return $this
        }
        return func('86', 0)
      }
    }
  }
}
</script>